<template lang="jade">
div.return-bar
	i.iconfont(@click="back()") &#xe668;
	div.limitedname {{{items.title}}}
	span.top_right_btn(@click="showPop")
		//i.iconfont &#xe637;

div.ndetail.detail_top
	div.fb_box.cbox
		span.at(v-show=" show_at ") {{reviewer}}
		input.cl(type="text", v-model="p_comment", placeholder="我想说")
		button.cl.m_btn(style="width:30%;", @click="post") 发表

	//div.adst(v-if=" showadts ")
		飘窗广告位置
		i.iconfont(@click="hideAdtsFun()") &#xe629;
	div.news_menu.clearfix
		i.iconfont(@click="showPop()") &#xe6f0;
		div.m_logo
			img(src="../../assets/images/mini-logo.png")
	div.newsdetail
		h2 {{{items.title}}}
		div.info
			span {{items.source}}
			span {{items.author}}
			span {{items.insert_time}}
			span.fr
				i.iconfont &#xe608;
				b {{items.click}}

		div.content(v-bind:class="{ 'readed': hasRead }") {{{items.content}}}
		div.showmore(v-show=" !hasRead ", @click="showArticle") 展开全文
			i.iconfont &#xe649;



		div.new_rate.cbox
			span.cl(@click="like(items.id, '1')")
				i.iconfont(v-bind:class=" clsLove ") &#xe603;
				b {{love_rate}}
			span.cl(@click="like(items.id, '2')")
				i.iconfont(v-bind:class=" clsHate ") &#xe614;
				b {{hate_rate}}
		//div.one_three.share
			div.line
				span 分享到
			ul
				li
					i
						img(src="../../assets/images/public/sharebtn_wc.gif")
					微信好友
				li
					i
						img(src="../../assets/images/public/sharebtn_mo.gif")
					朋友圈
				li
					i
						img(src="../../assets/images/public/sharebtn_weibo.gif")
					新浪微博

		div.ads.mb10
			//img(src="../../assets/images/banner/1.jpg")

		div.one_three.pb10.qr_recomend
			div.line.mb10
				span 公众号推荐
			ul.mb10
				li
					i
						img(src="../../assets/images/public/uxi-qr.jpg", v-link="/static/uxi-qr.jpg")
					有喜财富公众号
			div.note 注：长按二维码关注公众号。


	div.sc_box.comment_box(style="margin-bottom: 0.25rem;")
		div.title
			span
				i.iconfont &#xe64a;
				热门评论

		ul.list
			li(v-for=" (index, item) in comments " )
				div.upper.clearfix
					div.person(@click="atThem(item.click_parent, item.click_reviewer)")
						span.cover(style="background:url({{item.avatar}}) center center no-repeat;background-size:cover;" )
						span.txt {{item.reviewer}}
							b {{item.addtime}}

					div.rate(@click="commendlike(item.id, '1', item)")
						i.iconfont &#xe603;
						b {{item.click}}

				div.lower

					div.mb10 {{item.content}}
					div.commentlist(v-if=" item.sublist.length>0 ", v-bind:class="{ 'has-read': isItemSelected(item.id) }")
						div.comment(v-for=" (index, sub) in item.sublist " )
							div.reply
							div.tl.clearfix
								div.person
									i.index {{index+1}}
									span(@click="atThem(item.click_parent, item.click_reviewer)")
										span {{sub.reviewer}}
										b {{sub.addtime}}
								div.rate(@click="commendlike(sub.id, '1', sub)")
									i.iconfont &#xe603;
									b {{sub.click}}

							div.ct {{sub.content}}

					div.readmore(v-if=" item.sublist.length>1 ", v-show="  !isItemSelected(item.id)  ", v-on:click="clickItemId(item.id)")
						span 查看全部



	div.sc_box
		div.title
			span
				i.iconfont &#xe631;
				过往精选资讯
			span.more(v-link="{name: 'news'} " )
				更多>>
		ul.imglist
			li(v-for=" item in list  ",  @click ="goNews(item.id)"  )
				div.img
					img(src="{{item.img_cover}}")
				div.info
					div.stitle {{item.title}}
					div.extra
						span {{item.insert_time}}
						span.fr
							i.iconfont &#xe63f;
							b {{item.click}}







	//div.learnmore1
		共124条评论, 点击加载

popup(:show.sync="pop_show", height="100%")
	div.news_type_popup.ndetail.newsdetail_pop

		div.news_menu.clearfix
			i.iconfont.icon_close(@click="hidePopup()") &#xe643;
			div.m_logo
				img(src="../../assets/images/mini-logo.png")

		h2(v-show="isShowLogin()")
			a.p_btn(v-link="{ path: '/login?from=news' }") 登陆
		div.typelist
			ul(v-for="  (index, a) in ntypeData ")
				li(v-for=" b in a.sublist[index] ", v-on:click="setNewsType(b.id)") {{b.name}}


footer

	div.copyright 深圳市有喜资产管理有限公司 版权所有 <br> 备案号：粤ICP备16008329号 <br>地址:广东省深圳市福田区车公庙创新科技广场一期B座1508C <br>客服电话：400-678-8080 手机：18617068080 <br>投资交流群：479966413

		ul.authority
			li
				img(src="../../assets/images/news/authority/cnnic.png")
			li
				img(src="../../assets/images/news/authority/360cert.png")
			li
				img(src="../../assets/images/news/authority/govIcon.gif")
			li
				img(src="../../assets/images/news/authority/norton.png")

div.new_detail
	alert(:show.sync="alert_show", title="提示", button-text="关闭")
		p(style="text-align:center;") {{alertmsg}}

toast(:show.sync="toast_show") {{alertmsg}}
</template>


<script>
import '../../assets/sass/detail/new.scss'
import {c_article_comment, c_article_detail, c_article_like, c_add_comment} from '../../config/api'
import {Alert, Popup, Toast} from 'vux'
import api from '../../data/api';

export default{

	data(){
		return{
			ntypeData:[],
			showadts:true,
			pop_show:false,
			login_show:true,
			newsID:'',
			items:[],
			list:[],
			alert_show:false,
			toast_show:false,
			alertmsg:'',
			busy:false,
			comments:[],
			article_id:'',
			p_comment:'',
			comment_id:'',
			reviewer:'',
			show_at:false,
			item_id:'',
			love_rate:'',
			hate_rate:'',
			clsLove:'',
			clsHate:'',
			hasRead:false,
			share_title:'',
			share_link:'',
			wx_desc:'',
			logo:'http://www.uximoney.com/themes/blue/img/logo-temp.png',
			wx_share:{"newsID":"", "title":'', "link":'', "img":'http://www.uximoney.com/themes/blue/img/logo-temp.png', "desc":''},
		}
	},

	components: {
		Popup,
		Alert,
		Toast
	},
	methods:{

		showArticle(){
			this.hasRead = true;
		},
		clickItemId(id){
			this.item_id = id;
		},
		isItemSelected(id){
			if(this.item_id == id)
				return true;
			else
				return false;
		},
		atThem(id, name){
			this.show_at = true;
			this.comment_id = id
			this.reviewer = '@'+name

		},
		post(){



			if(this.p_comment!=""){

				var data = {'article_id': this.article_id, 'parent_id':this.comment_id, 'content': this.p_comment}
				this.$http.post(c_add_comment, data,'').then(function (rs) {
					this.alertmsg = rs.data.msg;
					this.alert_show = true;

					if(rs.data.status){
						this.getComment();
						this.p_comment = '';
						this.show_at = false;
					}

				});

				this.comment_id = '';
				this.reviewer = '';
				this.p_comment = '';

			}
		},
		setNewsType(key){
			this.$route.router.go('/news/'+key);
		},
		isShowLogin(){
			if(sessionStorage.getItem("login"))
				return false;
			else
				return true;
		},
		hidePopup(){
			this.pop_show = false;
		},
		showPop(){
			this.pop_show = true;
		},
		hideAdtsFun(){
			this.showadts = false;
		},
	    back(){
	      this.$route.router.go('/news/index');
	    },

	    like(r_id, r_type){
	    	//console.log("123");
	    	if(this.busy) {
	    		return false;
	    	}
	    	this.busy = true;
			this.$http({url: c_article_like+'&type='+r_type+'&id='+r_id+'&object=1', method: 'GET'}).then(function (response) {
				var result = response.data, code = response.data.code;
				this.alertmsg = result.msg;


				if(result.status){

					if(code=='clink_008'){
						if(r_type=='1'){
							this.love_rate  = parseInt(this.love_rate) + 1;
							this.hate_rate  = parseInt(this.hate_rate) - 1;
						}
						else{
							this.love_rate  = parseInt(this.love_rate) - 1;
							this.hate_rate  = parseInt(this.hate_rate) + 1;
						}
					}else{
						if(r_type=='1')
							this.love_rate  = parseInt(this.love_rate) + 1;
						else
							this.hate_rate  = parseInt(this.hate_rate) + 1;
					}
				}else{
					this.alert_show = true
				}

				/*if(result.status == false){
					this.alert_show = true
				}else{
					this.toast_show =true;
					this.love_rate  = parseInt(this.love_rate) + 1;
				}*/
				this.busy = false;
				if(r_type=='1') this.clsLove = 'up';
				if(r_type=='2') this.clsHate = 'down';



			});
	    },



	    commendlike(c_id, c_type, c_data){
	    	//console.log("123");
	    	if(this.busy) {
	    		return false;
	    	}
	    	this.busy = true;
			this.$http({url: c_article_like+'&type='+c_type+'&id='+c_id+'&object=2', method: 'GET'}).then(function (response) {
				var result = response.data;
				this.alertmsg = result.msg;

				if(result.status == false){
					this.alert_show = true
				}else{
					this.toast_show =true;
					c_data.click = parseInt(c_data.click)+1;
					//this.comments = []
					//this.getComment();
				}
				this.busy = false;
			});
	    },



	    getComment(){
	      this.$http({url: c_article_comment+'&article_id='+this.article_id, method: 'GET'}).then(function (response) {
	      	//if(response.data.status==true)
	      	if(response.data.data != undefined)
	      		this.comments = response.data.data.list;
	      });
	    },

	    fetch(){
			this.$store.dispatch('setShowLoading', true);
			this.$http({url: c_article_detail+'&id='+this.newsID, method: 'GET', timeout:6000}).then(function (response) {
				this.$store.dispatch('setShowLoading', false);
				this.items = response.data.data;
				if(this.items.img!='')
				this.logo = this.items.img;
				this.article_id = this.items.id;
				this.share_title = this.items.title;
				//this.share_link = this.share_link + this.article_id;
				//this.items = this.items.concat(response.data.data);
				this.list = this.list.concat(response.data.data.article);

				this.love_rate = this.items.love;
				this.hate_rate = this.items.hate;

				//this.list = response.data.data.article;
				this.getComment();
				document.title = this.items.title;
				this.wx_desc = this.delHtmlTag(this.items.content).substring(0,80)
				//document.title = items.title;

				//微信分享
				this.wx_share.desc = this.delHtmlTag(this.items.content).substring(0,80)
				this.wx_share.title = this.items.title;
				this.wx_share.img = this.items.img;
				this.wx_share.link =  window.location.href;

				this.global.wxset(this.wx_share)

				if(this.items.content.length<300)
					this.hasRead = true;

			});
	    },

		delHtmlTag(str){
			str = str.replace(/<[^>]+>/g,"");
			str = str.replace(/(^\s+)|(\s+$)/g,"");
			str = str.replace(/&nbsp;/ig, "");

	        str = str.replace(/\ +/g, ""); //去掉空格
	        str = str.replace(/[ ]/g, "");    //去掉空格
	        str = str.replace(/[\r\n]/g, ""); //去掉回车换行
			return str;
		},

	    goNews(id){

			/*this.comments = [];
			this.items = [];
			this.article_id = [];
			this.list = [];*/
			//this.$route.router.go('/news/detail/'+id);
			//window.location.reload();

		      this.newsID = id
		      this.fetch()
		      document.body.scrollTop =0
		},

		async getNewsType(){
			var res = await api.news.typelist();

			//console.log(res)
			if(res.status){
				this.ntypeData = res.data;
			}

			for(var i in this.ntypeData){
				for(var j in this.ntypeData[i].sublist ){
					console.log(this.ntypeData[i].sublist[j]);
				}
			}

		}
	},
	route:{
		activate( transition ){

			this.newsID = transition.to.params.newsId
			this.wx_share.newsID = this.newsID;
			this.share_link = this.share_link + this.newsID;
			this.fetch();
			transition.next();
			document.body.scrollTop = 0;
			this.getNewsType();

			//console.log(wx)
		}
	}
}
</script>
